<!--
 * @Descripttion: 按商品设置
 * @version:
 * @Author: 赵致喜
 * @Date: 2020-10-14 17:41:46
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-16 17:13:59
-->
<template>
  <div>
    <div class="control-box">
      <!-- control 操作区 START -->
      <e-control
        :search-form-options="formOptions"
        :search-label-width="searchLabelWidth"
        :btns="btns"
        @on-search="searchControlHandle"
        @on-refresh="refreshControlHandle"
        @change-height="changeControlHeight"
      ></e-control>
      <!-- control 操作区 END -->
    </div>
    <div class="table-box">
      <!-- table 数据表格 START -->
      <e-table
        :data="tableData"
        :columns="columns"
        stripe
        border
        :maxHeight="tableMaxHeight"
        style="width: 100%"
        @selection-change="changeTableSelectData"
        :current="pageData.pageNum"
        :total="pageData.total"
        @page-size-change="changePageSize"
        @page-current-change="changePageCurrent"
      >
        <template slot-scope="{ scope }" slot="selfPriceFloat">
          {{
            scope.row.selfPriceFloat !== null
              ? scope.row.selfPriceType !== '按品目'
                ? '+' + scope.row.selfPriceFloat
                : scope.row.selfPriceFloat + '%'
              : ''
          }}
        </template>
        <template slot-scope="{ scope }" slot="goodsState">
          {{ goodsStateMap[scope.row.goodsState] }}
        </template>
        <template slot-scope="{ scope }" slot="isAid">
          {{ scope.row.isAid ? '是' : '否' }}
        </template>
        <template slot-scope="{ scope }" slot="operation">
          <el-tooltip
            :content="item.title"
            placement="top"
            v-for="(item, index) in operationBtn"
            :key="index"
          >
            <el-button
              :icon="item.icon ? `el-icon-${item.icon}` : ''"
              v-bind="item.props"
              size="mini"
              @click="forwardEvent(item.event, scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </e-table>
      <!-- table 数据表格 END -->
    </div>
    <!-- editDialog 编辑弹窗 START -->
    <el-dialog
      title="自营价设置"
      :visible.sync="editDialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh!important"
      width="540px"
    >
      <el-form
        ref="editForm"
        :model="formData"
        :rules="formRules"
        label-width="130px"
      >
        <el-card style="overflow: initial">
          <el-form-item label="协议价" prop="price">
            ¥ {{ selRow.agreementPrice }}
          </el-form-item>
          <el-form-item label="自营价加价(¥)" prop="price">
            <el-input-number
              v-model="formData.price"
              controls-position="right"
              :min="0"
              :precision="2"
            ></el-input-number>
            <el-button class="ml20" type="primary" @click="setSelfPriceFloatFn"
              >保存</el-button
            >
          </el-form-item>
        </el-card>
      </el-form>
    </el-dialog>
    <!-- editDialog 编辑弹窗 END -->
  </div>
</template>

<script>
import eControl from '@/components/e-control'
import { selfPriceList, setSelfPriceFloat } from '@/api/admin.api'
import { formOptions, btns } from './control'
import columns from './columns'
export default {
  name: 'commodity-set',
  components: {
    eControl
  },
  props: {},
  data () {
    return {
      // 表格表头
      columns,
      // 表单配置项
      formOptions,
      // 表单数据
      formData: {
        price: ''
      },
      // 表单校验
      formRules: {
        price: [
          { required: true, message: '请输入自营价加价', trigger: 'blur' }
        ]
      },
      searchLabelWidth: '100px',
      // 按钮组
      btns,
      // 编辑框是否展示
      editDialogShow: false,
      // 编辑框表单数据
      dialogFormCurrent: {},
      // 查询表单
      searchFormData: {},
      // 控制区高度
      controlHeight: 0,
      // 表格数据
      tableData: [],
      // 分页数据
      pageData: {
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      },
      // 表格选中数据
      tableSelectData: [],
      // 商品状态map
      goodsStateMap: {
        COMMIT: '新提交',
        PASS: '审核通过',
        RETURN: '退回修改',
        DOWN: '商品下架'
      },
      // 选中行数据
      selRow: {}
    }
  },
  watch: {},
  computed: {
    // 组合查询条件和分页
    searchData() {
      const { pageNum, pageSize } = this.pageData
      return { ...this.searchFormData, size: pageSize, current: pageNum }
      // return Object.assign(this.searchFormData,{size: pageSize},{current:pageNum})
    },
    // 表单实例
    dialogForm() {
      return this.$refs.dialogForm
    },
    //表格最大高度
    tableMaxHeight() {
      return window.innerHeight - this.controlHeight - 160
    },
    // 操作列自定义按钮
    operationBtn() {
      let btns
      this.columns.map((item) => {
        if (item.slotName === 'operation') {
          btns = item.btns || []
        }
      })
      return btns
    }
  },
  methods: {
    // 初始化数据
    init() {
      this.getTableData()
    },
    // 查询参数
    searchControlHandle(data) {
      this.searchFormData = data
      this.refreshPageCurrent()
    },
    // 重置查询条件
    refreshControlHandle(data) {
      this.searchFormData = data
    },
    // 控制区高度变化
    changeControlHeight(height) {
      this.controlHeight = height
    },
    // 数据选中
    changeTableSelectData(rows) {
      this.tableSelectData = rows
    },
    // 修改分页条数查询
    changePageSize(size) {
      this.pageData.size = size
      this.getTableData()
    },
    // 修改当前分页查询
    changePageCurrent(current) {
      this.pageData.current = current
      this.getTableData()
    },
    // 重置当前分页查询
    refreshPageCurrent() {
      this.pageData.current = 1
      this.getTableData()
    },
    // 获取表数据
    getTableData() {
      const newSearch = {
        primaryCategory: this.searchFormData.catalog
          ? this.searchFormData.catalog[0]
          : '',
        secondaryCategory: this.searchFormData.catalog
          ? this.searchFormData.catalog[1]
          : '',
        tertiaryCategory: this.searchFormData.catalog
          ? this.searchFormData.catalog[2]
          : '',
        isAid: this.searchFormData.isAid,
        goodsName: this.searchFormData.goodsName,
        sku: this.searchFormData.sku,
        goodsState: this.searchFormData.goodsState,
      }
      const newSearchData = { ...newSearch, ...this.pageData }
      selfPriceList(newSearchData).then((res) => {
        this.tableData = res.content
        this.pageData.total = res.totalElements
      })
    },
    // 打开弹窗
    openDialog() {
      this.editDialogShow = true
    },
    // 关闭弹窗
    closeDialog() {
      this.editDialogShow = false
    },
    // 取消保存弹框
    cancelDialogDataHandle() {
      this.dialogForm.handleRefresh()
      this.closeDialog()
    },
    // 表单操作事件触发
    forwardEvent(event, item) {
      switch (event) {
        case 'showDetail':
          const routeUrl = this.$router.resolve({
            path: '/detail',
            query: { id: item.id }
          })
          window.open(routeUrl.href, '_blank')
          break
        case 'setSelfPrice':
          this.selRow = item
          this.formData.price =
            item.selfPriceType === '按价格' ? item.selfPriceFloat : ''
          this.openDialog()
        default:
          break
      }
    },
    // 设置自营价
    setSelfPriceFloatFn() {
      const data = {
        id: this.selRow.id,
        selfPriceFloat: this.formData.price,
      }
      setSelfPriceFloat(data).then((res) => {
        this.closeDialog()
        this.getTableData()
      })
    },
  },
  created() {},
  mounted() {
    this.init()
  },
}
</script>
<style lang="scss" scoped>
.control-box {
  margin-bottom: 10px;
}
.ml20 {
  margin-left: 20px;
}
</style>
